<template>
  <div class="home">
    <div class="sologan">
      <p class="en">Make ideas happen and make the world interesting</p>
      <p class="cn">让创意发生<span style="padding: 10px;">·</span>令世界有趣</p>
    </div>
    <div class="contact">
      <div class="item portfolio">
        <a href="https://www.digitaling.com/company/projects/11045" target="_blank"><img src="/assets/images/portfolio.png" alt="" class="icon">
        <span class="en">Portfolio</span></a>
      </div>
      <div class="item wechat" @mouseover="showQrcode = true" @mouseout="showQrcode = false">
        
        <a href="https://mp.weixin.qq.com/mp/homepage?__biz=MjM5NTU4NzIwMg==&hid=7&sn=feb54de730e51d05bce660e2b4e796f2&scene=18" v-if="isMobile">
        <SVGWechat class="icon"></SVGWechat>
        <span class="en">Wechat</span>
        </a>
        <template v-else>
        <a @click="showQrcode = !showQrcode">
        <SVGWechat class="icon"></SVGWechat>
        <span class="en">Wechat</span>
        </a>
        <div  class="qrcode" :class="{active:!showQrcode}">
          <img :src='QRCode'>
        </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import SVGWechat from '../components/icon/SVGWechat'
import {isMobile} from '@/Utils/isMobile'

export default {
  name: 'home',
  components: {
    'SVGWechat': SVGWechat
  },
  data() {
    return {
      showQrcode : false,
      isMobile: false,
      QRCode: ''
    }
  },
  mounted(){
    var QRCode = require('qrcode')
    let _this = this;
    let qrinfo = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MjM5NTU4NzIwMg==&subscene=0'
    _this.isMobile= isMobile();
    QRCode.toDataURL('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MjM5NTU4NzIwMg==&subscene=0',
      {
        errorCorrectionLevel: 'L',
        type: 'image/jpeg',
        width: 108,
        margin: 1,
        rendererOpts: {
          quality: 0.8
        }
      }
    ).then(function(data){
      _this.QRCode = data;
    })
    
  }
}
</script>

<style lang="less" scoped>
@import url(../assets/less/variables.less);
.sologan{
  max-width: 79vw;
  margin: 0 auto;
  .en{
    color: #fff;
    text-shadow: 0  0 1px #3c3d3d;
    font-weight: 600;
    font-size: 56px;
  }
  .cn{
    color: #d0d0d0;
    font-size: @fontsize-xxbig;
  }
  @media (max-width: @screen-xxbig-max){
    .en{font-size: 50px;}
    .cn{font-size: @fontsize-xxbig - 2;}
  }
  @media (max-width: @screen-xbig-max){
    .en{font-size: 40px;}
    .cn{font-size: @fontsize-xbig;}
  }
  @media (max-width: @screen-big-max){
    .en{font-size: 32px;}
    .cn{font-size: @fontsize-big}
  }
  @media (max-width: @screen-sm-max){
    .en{font-size: 8vw;}
    .cn{font-size: 3vw;}
  }
  @media all and (orientation : landscape) and (max-width: @screen-sm-max) {
    max-width: 100%;
    .en{font-size: 6.4vh;}
    .cn{font-size: 3vh;}
  }
}
.contact{
  display: flex;
  width: @logo-width-xxbig * @r-rate;
  max-width: 45vw;
  margin: 0 auto;
  padding-top: 30px;
  justify-content: space-between;
  .item{
    position: relative;
      font-size: 22px;
      color: #585858;
    a{
      text-decoration: none;
      color: #585858;
    }
    .icon{
      max-width: 80%;
    }
    a,span{
      display: block;
    }
    .qrcode{
      position: absolute;
      top: 50%;
      left: calc(100% + 20px);
      padding: 5px;
      background: #fff;
      border: 2px solid #c6c7c7;
      border-radius: 6px;
      transform: translateY(-50%);
      opacity: 1;
      transition: all .6s;
      &.active{
        opacity: 0;
        transform: translateX(-20px) translateY(-50%);
      }
      @bw: 6px;
      &:before{
        position: absolute;
        z-index: 2;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        width: 0;
        height: 0;
        border-top: @bw solid transparent;
        border-right: @bw solid #fff;
        border-bottom: @bw solid transparent;
        border-left: none;
      }
      &:after{
        position: absolute;
        z-index: 1;
        right: 100%;
        top: 50%;
        transform: translateY(-50%) translateX(-2px);
        content: "";
        width: 0;
        height: 0;
        border-top: @bw solid transparent;
        border-right: @bw solid #c6c7c7;
        border-bottom: @bw solid transparent;
        border-left: none;
      }
      img,canvas{
        display: block;
        width: 108px;
      }
      @media (max-width: @screen-sm-max){
        top: auto;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        &.active{
          opacity: 0;
          transform: translateY(-20px) translateX(-50%);
        }
        &:before{
          right: 50%;
          top: 100%;
          transform: translateX(50%);
          border-right: @bw solid transparent;
          border-top: @bw solid #fff;
          border-bottom: none;
          border-left: @bw solid transparent;
        }
        &:after{
          right: 50%;
          top: 100%;
          transform: translateX(50%) translateY(2px);
         
          border-top: @bw solid #c6c7c7;
          border-right: @bw solid transparent;
          border-bottom: none;
          border-left: @bw solid transparent;
        }
      }
    }
  }
  @media (max-width: @screen-xbig-max){
    width: @logo-width-xbig * @r-rate;
    .item{
      width: 80px;
      font-size: 18px;
      .icon{
        width: 50px;
        height: 50px;
      }
    }
  }
  @media (max-width: @screen-big-max){
    width: @logo-width-big * @r-rate;
    .item{
      width: 60px;
      font-size: 14px;
      .icon{
        width: 36px;
        height: 36px;
      }
    }
  }
  @media (max-width: @screen-sm-max){
    padding-top: 10vh;
    .item{
      max-width: 14.5vw;
      font-size: 2vw;
    }
  }
  
  @media all and (orientation : landscape) {
    padding-top: 4vh;
  }
}

.slide-fade-enter-active {
  transition: all .4s  cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-leave-active {
  transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(-20px) translateY(-50%) !important;
  opacity: 0;
}
</style>
